<template>
  <div class="commission-table">
    <div class="table-box">
      <table border="0" cellspacing="0" cellpadding="0" class="dTable">
        <thead>
          <tr>
            <th>{{$t('trade.contract')}}</th>
            <th>{{$t('trade.transition')}}</th>
            <th>{{$t('trade.openClose')}}</th>
            <th>{{$t('trade.dealPrice')}}</th>
            <th>{{$t('market.vol')}}</th>
            <th>{{$t('trade.fee')}}</th>
            <th>{{$t('trade.OGAL')}}</th>
            <th>{{$t('capital.currency')}}</th>
            <th>{{$t('trade.dealNo')}}</th>
            <th>{{$t('trade.entrustNo')}}</th>
            <th>{{$t('trade.dealTime')}}</th>
          </tr>
        </thead>
        <tbody>
          <!-- 无数据时展示 -->
          <tr v-if="tableList.length === 0" class="noneInfo">
            <td>{{$t('msg.noData')}}</td>
          </tr>
          <!-- 数据列表 -->
          <tr
            v-else
            v-for="(item, index) in tableList"
            :key="item.Id"
            :class="{active:index === traIndex}"
            @click="switchTraTr(index)"
          >
            <!-- 合约名称 -->
            <td>
              <div v-if="item.Name">{{item.Name}}</div>
              <div v-else>--</div>
            </td>
            <!-- 买卖 -->
            <td>
              <div v-if="item.Business">{{item.Business}}</div>
              <div v-else>--</div>
            </td>
            <!-- 开平 -->
            <td>
              <div v-if="item.Kaiping">{{item.Kaiping}}</div>
              <div v-else>--</div>
            </td>
            <!-- 成交价 -->
            <td>
              <div v-if="item.AveragePrice">{{item.AveragePrice}}</div>
              <div v-else>--</div>
            </td>
            <!-- 成交量 -->
            <td>
              <div v-if="item.NumberOfLots">{{item.NumberOfLots}}</div>
              <div v-else>--</div>
            </td>
            <!-- 手续费 -->
            <td>
              <div v-if="item.HandlingFee">{{item.HandlingFee}}</div>
              <div v-else>--</div>
            </td>
            <!-- 平仓盈亏 -->
            <td>
              <div v-if="item.PaL">{{item.PaL}}</div>
              <div v-else>--</div>
            </td>
            <!-- 币种 -->
            <td>
              <div v-if="item.Currency">{{item.Currency}}</div>
              <div v-else>--</div>
            </td>
            <!-- 成交号 -->
            <td>
              <div v-if="item.TransNo">{{item.TransNo}}</div>
              <div v-else>--</div>
            </td>
            <!-- 委托号 -->
            <td>
              <div v-if="item.Numbering">{{item.Numbering}}</div>
              <div v-else>--</div>
            </td>
            <!-- 成交时间 -->
            <td>
              <div v-if="item.TransTime">{{item.TransTime}}</div>
              <div v-else>--</div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  name: "SameDay",
  computed: {
    tableList() {
      return this.$store.getters.transactionlist;
    }
  },
  data() {
    return {
      traIndex: -1
    };
  },
  methods: {
    switchTraTr(i) {
      // 成交明细列表table表格选中事件
      this.traIndex = i;
    }
  }
};
</script>

<style lang="scss" scoped>
.commission-table {
  margin: 2px;
  height: 100%;
  .table-box {
    height: 100%;
    border: 1px solid #b1bbc0;
    border-right: 0;
  }
}
</style>
